---
type: tutorial
title: Scrivi il tuo primo articolo del blog in Markdown
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Aggiungi pagine Markdown al tuo sito
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Ora che hai creato pagine utilizzando file `.astro`, è il momento di creare alcuni articoli del blog utilizzando file `.md`!

<PreCheck>
  - Crea una nuova cartella e crea un nuovo articolo
  - Scrivi un po' di contenuto Markdown
  - Collega i tuoi articoli del blog sulla tua pagina Blog
</PreCheck>

## Crea il tuo primo file `.md`

<Steps>
1. Crea una nuova directory in `src/pages/posts/`.

2. Aggiungi un nuovo file (vuoto) `post-1.md` all'interno della tua nuova cartella `/posts/`.

3. Cerca questa pagina nell'anteprima del tuo browser aggiungendo `/posts/post-1` alla fine del tuo URL di anteprima esistente. (es. `http://localhost:4321/posts/post-1`)

4. Cambia l'URL di anteprima del browser per visualizzare invece `/posts/post-2`. (Questa è una pagina che non hai ancora creato.)

    Nota l'output diverso quando visualizzi in anteprima una pagina "vuota" e una che non esiste. Questo ti aiuterà a risolvere i problemi in futuro.
</Steps>

## Scrivi contenuto Markdown

<Steps>
1. Copia o digita il seguente codice in `post-1.md`

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Il mio primo articolo del blog'
    pubDate: 2022-07-01
    description: 'Questo è il primo articolo del mio nuovo blog Astro.'
    author: 'Studente Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Il logo di Astro su uno sfondo scuro con un bagliore rosa.'
    tags: ["astro", "blogging", "imparare in pubblico"]
    ---
    # Il mio primo articolo del blog

    Pubblicato il: 2022-07-01

    Benvenuto nel mio _nuovo blog_ sull'apprendimento di Astro! Qui, condividerò il mio percorso di apprendimento mentre costruisco un nuovo sito web.

    ## Cosa ho realizzato

    1. **Installazione di Astro**: Per prima cosa, ho creato un nuovo progetto Astro e configurato i miei account online.

    2. **Creazione di pagine**: Poi ho imparato come creare pagine creando nuovi file `.astro` e posizionandoli nella cartella `src/pages/`.

    3. **Creazione di articoli del blog**: Questo è il mio primo articolo del blog! Ora ho pagine Astro e articoli Markdown!

    ## Cosa c'è dopo

    Finirò il tutorial di Astro, e poi continuerò ad aggiungere altri articoli. Tieni d'occhio questo spazio per saperne di più.
    ```

2. Controlla di nuovo l'anteprima del tuo browser su `http://localhost:4321/posts/post-1`. Ora dovresti vedere del contenuto su questa pagina. Potrebbe non essere ancora formattato correttamente, ma non preoccuparti, lo aggiornerai più avanti nel tutorial!

3. Usa gli Strumenti per sviluppatori del tuo browser per ispezionare questa pagina. Nota che anche se non hai digitato alcun elemento HTML, il tuo Markdown è stato convertito in HTML. Puoi vedere elementi come intestazioni, paragrafi e voci di elenco.
</Steps>

:::note
Le informazioni nella parte superiore del file, all'interno dei recinti di codice, sono chiamate frontmatter. Questi dati — inclusi tag e un'immagine dell'articolo — sono informazioni _su_ il tuo articolo che Astro può utilizzare. Non appare automaticamente sulla pagina, ma vi accederai più avanti nel tutorial per migliorare il tuo sito.
:::

## Collega i tuoi articoli

<Steps>
1. Collega il tuo primo articolo con un tag di ancoraggio in `src/pages/blog.astro`:
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="it">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">Su di me</a>
        <a href="/blog/">Blog</a>

        <h1>Il mio Blog di apprendimento di Astro</h1>
        <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Articolo 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Ora, aggiungi altri due file in `src/pages/posts/`: `post-2.md` e `post-3.md`. Ecco del codice di esempio che puoi copiare e incollare nei tuoi file, oppure puoi creare il tuo!

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Il mio secondo articolo del blog
    author: Studente Astro
    description: "Dopo aver imparato un po' di Astro, non riuscivo a smettere!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Il logo di Astro su uno sfondo scuro con un arco sfumato viola."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "imparare in pubblico", "successi"]
    ---
    Dopo una prima settimana di successo imparando Astro, ho deciso di provarne un po' di più. Ho scritto e importato un piccolo componente a memoria!
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Il mio terzo articolo del blog
    author: Studente Astro
    description: "Ho avuto alcune difficoltà, ma chiedere nella community ha davvero aiutato!"
    image:
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Il logo di Astro su uno sfondo scuro con raggi arcobaleno."
    pubDate: 2022-07-15
    tags: ["astro", "imparare in pubblico", "battute d'arresto", "community"]
    ---
    Non è stato sempre tutto liscio, ma mi sto divertendo a costruire con Astro. E, la [community Discord](https://astro.build/chat) è davvero amichevole e disponibile!
    ```

3. Aggiungi link a questi nuovi articoli:

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="it">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">Su di me</a>
        <a href="/blog/">Blog</a>

        <h1>Il mio Blog di apprendimento di Astro</h1>
        <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Articolo 1</a></li>
          <li><a href="/posts/post-2/">Articolo 2</a></li>
          <li><a href="/posts/post-3/">Articolo 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Controlla l'anteprima del tuo browser e assicurati che:

    Tutti i tuoi link per Articolo 1, Articolo 2 e Articolo 3 portano a una pagina funzionante sul tuo sito. (Se trovi un errore, controlla i tuoi link su `blog.astro` o i nomi dei tuoi file Markdown.)
</Steps>


<Box icon="question-mark">
### Metti alla prova le tue conoscenze

1. Il contenuto in un file Markdown (`.md`) viene convertito in:
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso creare una nuova cartella all'interno di `src/pages/` per i miei articoli del blog.
- [ ] Posso creare un nuovo file di articoli del blog Markdown (`.md`).
- [ ] Capisco che Markdown è un altro linguaggio che, come Astro, produce HTML nel mio browser.
</Checklist>
</Box>

### Risorse

- [Foglio Cheat Markdown dalla Guida Markdown](https://www.markdownguide.org/cheat-sheet/)  <Badge class="neutral-badge" text="external" />

- [Cosa sono gli strumenti per sviluppatori del browser? MDN](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)  <Badge class="neutral-badge" text="external" />

- [Frontmatter YAML](https://assemble.io/docs/YAML-front-matter.html)  <Badge class="neutral-badge" text="external" />
